<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="教师账号">
            <el-input
              v-model="formInline.user"
              placeholder="教师账号"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addteacher">添加</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 1080px">
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <router-link
                :to="{
                  path: '/collage_teacherinfo',
                  query: { id: scope.row.id },
                }"
                >{{ scope.row.teacher_name }}</router-link
              >
            </template>
          </el-table-column>
          <el-table-column label="学院" width="300">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.teacher_college
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职位" width="300">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.teacher_Workplace
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                修改密码
              </el-button>
              <el-button size="mini" @click="deleTeacher(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <!-- 弹框内容 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="old" label="旧密码">
          <el-input disabled v-model="form.old"></el-input>
        </el-form-item>
        <el-form-item prop="new" label="新密码">
          <el-input v-model="form.new"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatatrue()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增教师弹框 -->
    <el-dialog
      title="新增教师"
      :visible.sync="dialogVisible_teacher"
      width="45%"
    >
      <!-- 弹框内容 -->
      <el-form
        ref="form_addteacher"
        :model="form_addteacher"
        :rules="add_rules"
        label-width="80px"
      >
        <el-form-item prop="name" label="姓名">
          <el-input v-model="form_addteacher.name"></el-input>
        </el-form-item>
        <el-form-item prop="num" label="账号">
          <el-input v-model="form_addteacher.num"></el-input>
        </el-form-item>
        <el-form-item prop="Workplace" label="职称">
          <el-input v-model="form_addteacher.Workplace"></el-input>
        </el-form-item>
        <el-form-item prop="degree" label="学位">
          <el-input v-model="form_addteacher.degree"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_teacher = false">取 消</el-button>
        <el-button type="primary" @click="addtrue()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryinfo.limit"
      :current-page="queryinfo.current"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  created() {
    this.getteacher();
  },
  data() {
    return {
      total: null,
      allcurrent: null,
      queryinfo: {
        limit: 5,
        current: 1,
      },
      form_addteacher: {},
      form: {
        old: "",
        new: "",
      },
      rules: {
        new: [
          { required: true, message: "必填哦", trigger: "blur" },
          { min: 6, max: 12, message: "密码6-12位", trigger: "blur" },
        ],
      },
      add_rules: {
        name: { required: true, message: "必填哦", trigger: "blur" },
        num: { required: true, message: "必填哦", trigger: "blur" },
        Workplace: { required: true, message: "必填哦", trigger: "blur" },
        degree: { required: true, message: "必填哦", trigger: "blur" },
      },
      tableData: [],
      formInline: {},
      msg: [],
      dialogVisible: false,
      dialogVisible_teacher: false,
    };
  },
  methods: {
    onSubmit() {
      if (!this.formInline.user) {
        this.tableData = this.msg.filter(() => {
          return !this.formInline.user;
        });
        this.total = this.allcurrent;
      }
      if (this.formInline.user) {
        this.tableData = this.msg.filter((val) => {
          return this.formInline.user == val.teacher_num;
        });
        this.total = this.tableData.length;
      }
    },
    getteacher() {
      this.$http
        .get("http://127.0.0.1:8080/minAdmin/get_allteacher", {
          params: this.queryinfo,
        })
        .then((res) => {
          if (res.data.status == 0) {
            // console.log(res);
            this.tableData = res.data.data.datalist;
            this.msg = res.data.data.datalist;
            this.total = res.data.data.total;
            this.allcurrent = res.data.data.total;
          } else {
            // this.$message.error(res.data.message);
          }
          // console.log(this.tableData);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改按钮
    handleEdit(index, row) {
      this.dialogVisible = true;
      // console.log(index, row);
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/get_teacherpwd",
          this.$qs.stringify(row)
        )
        .then((res) => {
          // console.log(res);
          this.form.old = res.data.data[0].password;
        });
    },

    //添加教师
    addteacher() {
      this.dialogVisible_teacher = true;
    },
    // 删除
    deleTeacher(row) {
      console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/dele_teacherinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.getteacher();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 确认添加
    addtrue() {
      // console.log(this.form_addteacher);
      this.$refs.form_addteacher.validate((valid) => {
        if (!valid) return;
        this.dialogVisible_teacher = false;
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin/addteacher",
            this.$qs.stringify(this.form_addteacher)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.getteacher();
              this.$message.success(res.data.message);
              this.form_addteacher = {};
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },

    // 确认修改
    updatatrue() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.dialogVisible = false;
        // console.log(index, row);
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin/update_teacherpwd",
            this.$qs.stringify(this.form)
          )
          .then((res) => {
            // console.log(res);
            this.$message.success("修改成功");
          });
      });
    },

    // 点击页码跳转
    currentChange(val) {
      this.queryinfo.current = val;
      this.getteacher();
    },
    // 上一页跳转
    prevClick(val) {
      this.queryinfo.current = val;
      this.getteacher();
    },
    // 下一页跳转
    nextClick(val) {
      this.queryinfo.current = val;
      this.getteacher();
    },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0);
}
</style>
